<template>
    <div class="header">
        <div class="topbar">
            <div class="bui-left clearfix" v-if="options.isHomePage">
                <a class="download-app tb-link" href="//app.toutiao.com/news_article/" target="_blank" ga_event="mh_nav_others">下载APP</a>
                <weather-box></weather-box>
            </div>
            <div class="bui-left clearfix" v-if="!options.isHomePage">
                <ul class="nav-list" ga_event="mh_channel">
                    <li v-for="item in navItem" class="bui-left">
                        <a class="tb-link" :href="item.url" target="_blank" :ga_event="'mh_channel_' + item.en">{{ item.name }}</a>
                    </li>
                    <li class="bui-left">
                        <tt-dropdown>
                            <a href="javascript:void(0);" class="tt-dropdown-link tb-link">
                                更多
                                <tt-icon type="arrow_down" color="#fff" size="14"></tt-icon>
                            </a>
                            <tt-dropdown-menu slot="dropdown">
                                <tt-dropdown-item v-for="item in navMore" :key="item.en">
                                    <a class="tb-link" :href="item.url" target="_blank" :ga_event="'mh_channel_' + item.en">{{ item.name }}</a>
                                </tt-dropdown-item>
                            </tt-dropdown-menu>
                        </tt-dropdown>
                    </li>
                </ul>
            </div>
            <div class="bui-right">
                <ul class="user-nav-list clearfix">
                    <li v-if="options.id && options.isPgc" class="new-article">
                        <a class="tb-link" href="//mp.toutiao.com/new_article/" ga_event="mh_write">发文</a>
                    </li>
                    <li v-if="options.id">
                        <tt-dropdown>
                            <div class="tt-dropdown-link tb-link">
                                <a :href="'//www.toutiao.com/c/user/' + options.id + '/'" ga_event="mh_nav_user" target="_blank" rel="nofollow" class="user-name">
                                    <img :src="options.avatarUrl" class="user-avatar">
                                    {{ options.userName }}</a>
                            </div>
                            <tt-dropdown-menu slot="dropdown">
                                <tt-dropdown-item>
                                    <a :href="'//www.toutiao.com/c/user/' + options.id + '/?tab=favourite'" class="layer-item" target="_blank" rel="nofollow">我的收藏</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item>
                                    <a :href="'//www.toutiao.com/c/user/' + options.id + '/?tab=following'" class="layer-item" target="_blank" rel="nofollow">我的关注</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item>
                                    <a :href="'//www.toutiao.com/c/user/relation/' + options.id + '/?tab=followed'" class="layer-item" target="_blank" rel="nofollow">我的粉丝</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item divided>
                                    <a href="https://sso.toutiao.com/logout/" class="layer-item" rel="nofollow">退出</a>
                                </tt-dropdown-item>
                            </tt-dropdown-menu>
                        </tt-dropdown>
                    </li>
                    <li v-if="!options.id" class="nav-login">
                        <a ga_event="nav_login" href="https://sso.toutiao.com/login/" class="tb-link">登录</a>
                    </li>
                    <li>
                        <feedback :show="false"></feedback>
                    </li>
                    <li>
                        <a href="http://www.toutiao.com/complain/" class="tb-link" ga_event="mh_nav_complain" target="blank">侵权投诉</a>
                    </li>
                    <li>
                        <tt-dropdown>
                            <a href="javascript:;" class="tt-dropdown-link tb-link">头条产品</a>
                            <tt-dropdown-menu slot="dropdown">
                                <tt-dropdown-item>
                                    <a href="https://www.wukong.com/" target="_blank" ga_event="mh_nav_others" class="layer-item">问答</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item>
                                    <a href="https://mp.toutiao.com/" target="_blank" ga_event="mh_nav_others" class="layer-item">头条号</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item>
                                    <a href="https://tuchong.com/" target="_blank" ga_event="mh_nav_others" class="layer-item">图虫</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item>
                                    <a href="https://stock.tuchong.com/?source=ttweb" target="_blank" ga_event="mh_nav_others" class="layer-item">正版图库</a>
                                </tt-dropdown-item>
                                <tt-dropdown-item>
                                    <a href="https://ad.toutiao.com/promotion/?source2=pchometop" target="_blank" ga_event="mh_nav_ad" class="layer-item">广告投放</a>
                                </tt-dropdown-item>
                            </tt-dropdown-menu>
                        </tt-dropdown>
                    </li>
                </ul>
            </div>
        </div>
        <div class="middlebar" v-if="options.hasBar">
            <div class="middlebar-inner clearfix" :style="{width: middlebarWidth + 'px'}">
                <div class="bui-left logo-box">
                    <a class="logo-link" href="/" ga_event="go_home">
                        <img class="logo" :src="logoImg">
                    </a>
                </div>
                <div class="bui-left chinese-tag" v-if="options.chineseTag">
                    <a href="/" target="_blank" ga_event="click_index">首页</a>
                    /
                    <a :href="'/' + options.crumbTag" target="_blank" ga_event="click_channel">{{ options.chineseTag }}</a>
                    /
                    <span class="text">正文</span>
                </div>
                <div class="bui-right">
                    <search-box></search-box>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    @import "./header.less";
</style>

<script>
  import WeatherBox from '../../weatherbox';
  import SearchBox from '../../searchbox';
  import Feedback from '../../feedback';

  export default {
    name: 'TtHeader',
    data() {
      return {
        isShowFeedback: false,
        logoImg: require('../../../../assets/logo.png'),
        navItem: [
          {name: '推荐', url: '/', en: 'recommend'},
          {name: '热点', url: '/ch/news_hot/', en: 'hot'},
          {name: '视频', url: '/ch/video/', en: 'video'},
          {name: '图片', url: '/ch/news_image/', en: 'image'},
          {name: '段子', url: '/ch/essay_joke/', en: 'essay'},
          {name: '社会', url: '/ch/news_society/', en: 'society'},
          {name: '娱乐', url: '/ch/news_entertainment/', en: 'entertainment'},
          {name: '科技', url: '/ch/news_tech/', en: 'tech'},
          {name: '汽车', url: '/ch/news_car/', en: 'car'},
          {name: '体育', url: '/ch/news_sports/', en: 'sports'},
          {name: '财经', url: '/ch/news_finance/', en: 'finance'},
          {name: '军事', url: '/ch/news_military/', en: 'military'},
          {name: '国际', url: '/ch/news_world/', en: 'world'},
          {name: '时尚', url: '/ch/news_fashion/', en: 'fashion'},
          {name: '旅游', url: '/ch/news_travel/', en: 'travel'}
        ],
        navMore: [
          {name: '探索', url: '/ch/news_discovery/', en: 'discovery'},
          {name: '育儿', url: '/ch/news_baby/', en: 'baby'},
          {name: '养生', url: '/ch/news_regimen/', en: 'regimen'},
          {name: '故事', url: '/ch/news_story/', en: 'story'},
          {name: '美文', url: '/ch/news_essay/', en: 'essay'},
          {name: '游戏', url: '/ch/news_game/', en: 'game'},
          {name: '历史', url: '/ch/news_history/', en: 'history'},
          {name: '美食', url: '/ch/news_food/', en: 'food'}
        ]
      }
    },
    props: {
      options: {
        type: Object,
        default: function () {
          return {}
        }
      },
      middlebarWidth: {
        type: Number,
        default: 1120
      }
    },
    methods: {
      closeFeedback() {
        this.isShowFeedback = false;
      },
      showFeedback(e) {
        this.isShowFeedback = true;
      }
    },
    components: {
      WeatherBox,
      SearchBox,
      Feedback
    }
  }
</script>
